<template>
  <view>
    <view class="product-container">
      <view
        v-for="(item, index) in categoryList"
        :key="index"
        class="product-item"
      >
        <image 
          :src="item.imageUrl" 
          class="product-image"
          mode="aspectFit"
        />
        <view class="product-info">
          <view class="product-title">臻味&鲜品屋-上新臻味&鲜品屋-上新上新上新上新</view>
          <view class="price-buy-container">
            <view class="price-section">
              <view class="price-stack">
                <text class="activity-label">活动价</text>
                <text class="product-price">
					<text style="font-size: 8px;">¥</text>
					399</text>
              </view>
            </view>
            <view class="buy-button">
				<text>点击购买</text>
			</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "CategoryList",
  data() {
    return {
      categoryList: [
        { imageUrl: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1733726902675692b67d527.png" },
        { imageUrl: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1733726902675692b67d527.png" },
        { imageUrl: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1733726902675692b67d527.png" },
        { imageUrl: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1733726902675692b67d527.png" },
      ],
    };
  }
};
</script>

<style lang="scss" scoped>
.product-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 16px;
}

.product-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  padding: 12px;
  position: relative;
  min-height: 200px;
  background-image: url('https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1733727432675694c84c6f8.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.product-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.product-image {
  width: 132px;
  height: 106px;
  border-radius: 8px;
  position: relative;
  z-index: 2;
}

.product-info {
  padding: 8px 0;
  position: relative;
  z-index: 2;
}

.product-title {
  font-size: 14px;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  line-height: 1.3;
  color: #333;
}

.price-buy-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-section {
  display: flex;
  align-items: flex-end;
}

.price-stack {
  display: flex;
  flex-direction: column;
}

.activity-label {
  font-size: 8px;
  color: #ff4400;
  line-height: 1;
  margin-bottom: 2px;
}

.product-price {
  color: #ff4400;
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
}
.buy-button {
    width: 82px;
    height: 32px;
    background: linear-gradient(148deg, #DB5656 0%, #C41F1F 100%);
    border-radius: 16px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 10;
    
    text {
        z-index: 12;
		font-size: 28rpx;
		color: #F9DDB3;
        line-height: 32px;
        text-align: center;
    }
    
    &::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: linear-gradient(125deg, 
            rgba(224, 184, 121, 1),
            rgba(249, 221, 179, 1),
            rgba(234, 189, 156, 1)
        );
        border-radius: 18px;
        z-index: -1;
    }
    
    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: inherit;
        border-radius: 16px;
        z-index: 0;
    }
}

</style>